<template>
	<view style="">
		<view class="top1">
			<view :class="{item1:true,active:activeIndex==='1'}" @click="navageto('1')">
				首页
			</view>
			<view :class="{item1:true,active:activeIndex==='2'}" @click="navageto('2')">
				操作页
			</view>
			<view :class="{item1:true,active:activeIndex==='3'}" @click="navageto('3')">
				消息页
			</view>
			<view :class="{item1:true,active:activeIndex==='4'}" @click="navageto('4')">
				课程页
			</view>
		</view>
		<view class="main" style="display: flex;">
			<view class="itemmae">
				<view @click="checkindex(0)" :class="{itemactive:tabacitive===0}">通知</view>
				<view @click="checkindex(1)" :class="{itemactive:tabacitive===1}">推荐</view>
				<view @click="checkindex(2)" :class="{itemactive:tabacitive===2}">资料</view>
			</view>
			<view class="dil_box"  v-loading="loadding">
				<!-- 通知 -->
				<view v-show="tabacitive===0">
					<view class="notic23" v-for="item in messagedata" :key="item._id">
						<image  src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-0e81782d-dd8f-4ba7-90bb-b62e4fa43b58/a095db02-7164-4955-a8fd-57cbf8fb932d.png" mode=""></image>
						<view class="conte34">
							<view style="font-size: 16px; font-weight: bold;">
								{{item.title}}
							</view>
							<view style="font-size: 14px;padding-top: 10px;">
									{{item.message}}
							</view>
						</view>
					</view>
				</view>
				<view v-show="tabacitive===1">
					<view class="notic23" v-for="item in messagedata" :key="item._id">
						<image  src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-0e81782d-dd8f-4ba7-90bb-b62e4fa43b58/6ac65f28-f07b-48b9-8ca2-727d6c3212e9.png" mode="aspectFill"></image>
						<view class="conte34">
							<view style="font-size: 16px; font-weight: bold;">
								{{item.title}}
							</view>
							<view style="font-size: 14px;padding-top: 10px;">
								{{item.message}}
							</view>
						</view>
					</view>
				</view>
				<view v-show="tabacitive===2">
					<view class="notic23" v-for="item in messagedata" :key="item._id">
						<image  src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-0e81782d-dd8f-4ba7-90bb-b62e4fa43b58/1abc741a-3299-4dab-8d46-49bfe9ec9097.png" mode="aspectFill"></image>
						<view class="conte34">
							<view style="font-size: 16px; font-weight: bold;">
								{{item.title}}
							</view>
							<view style="font-size: 14px;padding-top: 10px;">
								{{item.message}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dialogVisible: false,
				activeIndex: '3',
				tabacitive:0,
				messagedata:[],
				loadding:false
			};
		},
		onLoad() {
			this.mesaageok()
		},
		onShow() {
			if (uni.getStorageSync('uni_id_token') && uni.getStorageSync('uni_id_token_expired')) {} else {
				this.dialogVisible = true
			}
		},
		methods:{
			navageto(id){
				if (id === '2') {
					uni.switchTab({
					    url: '/pages/home/upload/upload'
					});
				}else if (id === '1') {
					uni.switchTab({
					    url: '/pages/home/home'
					});
				}else if (id === '4') {
					uni.switchTab({
					    url: '/pages/home/course/course'
					});
				}
			},
			queren() {
				this.dialogVisible = false
				uni.clearStorageSync();
				uni.reLaunch({
					url: '../../login/login'
				})
			},
			checkindex(id){
				this.loadding=true
				this.tabacitive=id
				console.log(this.tabacitive);
				this.mesaageok()
			},
			async mesaageok(){
				const db = uniCloud.database()
				let res = await db.collection('xiaoxi').where({
					type:this.tabacitive
				}).get()
				if(res.result.code===0){
					console.log(res);
					this.messagedata=res.result.data
				}else{
				}
				this.loadding=false
			},
		}
	}
</script>

<style lang="scss">
	*{
		box-sizing: border-box;
	}
.top1 {
		width: 100%;
		height: 60px;
		background-color: #545c64;
		display: flex;
		padding-bottom: 3px;
		padding: 0px 100px;
	}

	.item1 {
		width: 70px;
		height: 60px;
		text-align: center;
		line-height: 60px;
		color: #fff;
		margin-right: 20px;
		cursor: pointer;
	}

	.active {
		color: #ffd04b;
		border-bottom: 3px solid #ffd04b;
	}

	.main {
		padding: 20px 100px;
		width: 100%;
		background-color: #fff;
	}
	.itemmae{
		margin-right: 40px;
		width: 150px;
		background-color: #fff;
		text-align: center;
		view{
			border-bottom: 2px solid transparent;
			cursor: pointer;
			padding: 10px 0px;
		}
	}
	.itemmae view:hover{
		border-bottom: 2px solid #ccc;
	}
	.itemactive{
		border-bottom: 2px solid #ccc !important;
	}
	.dil_box{
		height: 600px;
		overflow: auto;
		flex: 1;
		border: 1px solid #ccc;
	}
	.notic23{
		margin: 20px 0px;
		width: 600px;
		display: flex;
		image{
			margin: 20px;
			width: 40px;
			height: 40px;
			border-radius: 50%;
		}
	}
	.conte34{
		max-width: 500px;
		padding-top: 20px;
	}/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
	::-webkit-scrollbar {
		width: 5px;
		height: 2px;
		background-color: #55ffff;
	}

	/*定义滚动条轨道 内阴影+圆角*/
	::-webkit-scrollbar-track {
		-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
		border-radius: 10px;
		background-color: #55ffff;
	}

	/*定义滑块 内阴影+圆角*/
	::-webkit-scrollbar-thumb {
		border-radius: 10px;
		-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
		background-color: #00aaff;
	}
</style>
